<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友Adam分享用Aui-core+CSS3实现仿安卓时钟JS特效</title>
<meta name="Keywords" content="Jquery插件,div+css,JquerySchool" />
<meta name="description" content="JquerySchooluery" />
<style>
* { 
	margin:0;
	padding:0; 
	list-style:none; 
}
body { 
	background:#232323;
	overflow:hidden;
}

#shadow {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:-1;
	
	background:-webkit-radial-gradient(center center , 50% 50%, #666, #232323 );
	background:-moz-radial-gradient(center center , 150px 50px, #cfcfcf, #232323 );
	background:-ms-radial-gradient(center center , 150px 50px, #cfcfcf, #232323 );
	background:-o-radial-gradient(center center , 150px 50px, #cfcfcf, #232323 );
	background:radial-gradient(center center , 150px 50px, #cfcfcf, #232323 );
	-webkit-transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
	-moz-transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
	-ms-transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
	-o-transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
	transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
}

#demo1 { 
	width: 1000px;
	margin:0 auto;
	margin-top:15%;
	height:150px;
	
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

#demo1 dd,#demo1 dt { 
	border:1px solid #fafafa;
	box-shadow:2px 2px 4px #000;
	text-align:center;
	float:left;
	height:150px;
	margin-left:13px;
	position:relative;
	border-radius:10px;
	font-size:110px;
	font-family:"微软雅黑", "Microsoft Sans Serif", Arial;
	
	background:-webkit-linear-gradient( top, #fafafa 0%, #dcdcdc 100% );
	background:-moz-linear-gradient( top, #fafafa 0%, #dcdcdc 100% );
	background:-ms-linear-gradient( top, #fafafa 0%, #dcdcdc 100% );
	background:-o-linear-gradient( top, #fafafa 0%, #dcdcdc 100% );
	background:linear-gradient( top, #fafafa 0%, #dcdcdc 100% );
}

#demo1 dd {
	width: 120px; 
	line-height:150px; 
	
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

#demo1 dd div,#demo1 dt div {
	position:absolute;
	left:0;
	top:160px;
	height:60px; /* height:150px; */
	width:120px;
	border-radius:10px;
	opacity:.3;
	-webkit-transform:rotateX(180deg);	
	-moz-transform:rotateX(180deg);	
	-ms-transform:rotateX(180deg);	
	-o-transform:rotateX(180deg);	
	transform:rotateX(180deg);	
	
	background:-webkit-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
	background:-moz-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
	background:-ms-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
	background:-o-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
	background:linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
	
	color:transparent;
	
	/*-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	-o-background-clip: text;
	background-clip: text;*/
}
#demo1 dt div {
	width:80px;
}

#demo1 dt { 
	line-height:125px; 
	width:80px; 
} 

.move {
	-webkit-transition:all 400ms ease;	
	-moz-transition:all 400ms ease;	
	-ms-transition:all 400ms ease;	
	-o-transition:all 400ms ease;	
	transition:all 400ms ease;	
}

.modeX {
	-webkit-transform:rotateX(360deg);	
	-moz-transform:rotateX(360deg);	
	-ms-transform:rotateX(360deg);	
	-o-transform:rotateX(360deg);	
	transform:rotateX(360deg);	
}

.modeY {
	-webkit-transform:rotateY(360deg);	
	-moz-transform:rotateY(360deg);	
	-ms-transform:rotateY(360deg);	
	-o-transform:rotateY(360deg);	
	transform:rotateY(360deg);	
}


</style>
<script src="../js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
( function( w ) {
	w.adam = function( id ){
		return new adamClock( id );
	};
	var adamClock = function( id ){
		this.id = id;
		this.def = false;
		this.timer = null;
	};
	
	adamClock.prototype = {
		_getTime : function( o ){
			var h = this._toString( o.getHours() ),
				m = this._toString( o.getMinutes() ),
				s = this._toString( o.getSeconds() );	
			return [
				h.charAt( 0 ),
				h.charAt( 1 ),
				m.charAt( 0 ),
				m.charAt( 1 ),
				s.charAt( 0 ),
				s.charAt( 1 )
		    ];
		},
		_toString : function( num ){
			return ( num > 9  ? num : "0" + num ).toString();
		},
		init : function( speed, mode, move ){
			speed = speed || 100;
			mode = mode || "modeY";
			move = move || "move";
			var _this = this;
			Aui("body").append("<dl id=" + _this.id + "><dd><span>0</span><div></div></dd><dd><span>0</span><div></div></dd><dt><span>:</span><div></div></dt><dd><span>0</span><div></div></dd><dd><span>0</span><div></div></dd><dt><span>:</span><div></div></dt><dd><span>0</span><div></div></dd><dd><span>0</span><div></div></dd></dl>");
			var oDD = Aui( "#" + _this.id ).find("dd");
			_this.timer = setInterval( function(){
				var t = _this._getTime( new Date() ), i;
				for( i = 5 ; i >= 0; i-= 1){
					var thisDD = oDD.eq( i );
					if( thisDD.find("span").text() == t[ i ] && _this.def ) break;
					console.log( thisDD )
					thisDD.addClass( move + " " + mode ).find("span").text( t[ i ] ); //.next().text( t[ i ] )
					( function( o ){
						setTimeout(function(){
							o.removeClass( move + " " + mode );
						}, speed + 10 );
					})( thisDD )
				};
				_this.def = true;
			}, 1000 );
			return this;
		}
	};
})( window );

Aui.ready( function(){
	if( /ie/g.test( Aui.browser() ) ){
		Aui("body").html("Adam CSS 3.0 effect，支持非IE浏览器。你懂的！").setStyle({
		   	"color" : "#fff",
		   	"text-align" : "center",
		    "font-size" : "50px",
		    "font-weight" : "bolder",
		    "line-height" : "500px"
	    });
	}else{
		adam("demo1").init( 100, "move", "modeY" );
	};
});
</script>
</head>

<body>
	<div id="shadow"></div>
</body>
</html>
